<!--  -->
<template>
  <div class='courseApply' style="padding:20px">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="课程申请" name="first"></el-tab-pane>
      <el-tab-pane label="申请进度" name="second"></el-tab-pane>
      <el-tab-pane label="草稿箱" name="third"></el-tab-pane>
    </el-tabs>
    <!-- {{gabbageList.length && gabbageList.map(it=>it.imgSrc)}} -->
    <div v-if='activeName == "first"' style="margin-top: -50px">
      <apply-detail></apply-detail>
    </div>
    <div v-if='activeName == "second"' class="secondBox">
      <div style="padding:5px;border-bottom:none">
        审核状态
        <!-- <el-select v-model="auditStatus" placeholder="审核状态" style="margin-left:20px" @change='courseProgress' clearable>
          <el-option v-for="opt in auditStatusList" :key="opt.id" :label="opt.label" :value="opt.value" />
        </el-select> -->
        <el-select v-model="auditStatus" placeholder="审核状态" style="margin-left:20px" @change='courseProgress' clearable>
          <el-option label="待审核" value="0"></el-option>
          <el-option label="已通过" value="1"></el-option>
          <el-option label="已驳回" value="2"></el-option>
        </el-select>
      </div>
      <div style="border-radius: 15px;background: #fff;margin-top: 30px">
        <div style="display:flex;padding-bottom:20px;border-bottom:1px solid rgb(229,229,229);padding-right:10px" v-for='i in courseList' :key='i.id'>
          <el-image :src="host +i.homePage" alt="" style='width:400px;height:230px;'>
            <div slot="error" class="image-slot noImage">暂无封面</div>
          </el-image>
          <div style="flex:1;display:flex;flex-direction: column; justify-content: space-around">
            <el-descriptions title="" direction="vertical" :column="8" style="display:inline-block;background: rgb(229,229,229);border-radius: 15px;" :colon='false'>
              <el-descriptions-item label="课程名称">{{i.courseName}}</el-descriptions-item>
              <el-descriptions-item label="难易程度">{{i.difficultyName}}</el-descriptions-item>
              <el-descriptions-item label="预计课时">{{i.costTime}}</el-descriptions-item>
              <el-descriptions-item label="预计开课-结课时间" :span="2"> {{i.startTime}}-{{i.endTime}}</el-descriptions-item>
              <el-descriptions-item label=""> </el-descriptions-item>
              <el-descriptions-item :span="1">
                <template slot="label">
                  <el-button style="cursor:pointer" type="primary" @click="detailClick(i)">
                    查看详情
                    <!-- <i class="el-icon-right"></i> -->
                  </el-button>

                </template>
              </el-descriptions-item>
            </el-descriptions>
            <!-- 
                   :process-status='i.auditStatus ==0?"wait":i.auditStatus ==2?"error":i.auditStatus ==1?"success":""' 
            :active="i.auditStatus !=0?2:1" 
             -->
            <el-steps finish-status="success">
              <el-step title="提交申请"></el-step>
              <el-step :title="i.auditStatus == 0?'待审核':i.auditStatus == 1?'已通过':'已驳回'" :status='i.auditStatus =="0"?"wait":i.auditStatus =="2"?"error":i.auditStatus =="1"?"success":"success"'></el-step>
            </el-steps>
          </div>
        </div>
        <el-empty v-if='!courseList.length' description='暂无数据'></el-empty>
      </div>
    </div>
    <div v-if='activeName == "third"'>
      <!-- isDetail不显示详情，显示自定义内容 -->
      <CommonPic :list='gabbageList' @clickDetail='detailClick' isDetail='false'></CommonPic>
    </div>
  </div>
</template>

<script>
import applyDetail from "./applyDetail";
import teacherApi from "../api/teacher.service.js";
import operateApi from "../api/operate.service.js";

export default {
  components: { applyDetail },
  data() {
    return {
      activeName: "first",
      auditStatus: "",
      courseId: "", //添加成功之后的cousreId， 添加大纲的时候需要
      courseList: [], // 申请课程list
      gabbageList: [],
      host: window.location.href.split("/#/")[0] + "/api",
    };
  },
  mounted() {
  },
  computed: {},
  watch: {},
  methods: {
    handleClick(tab, event) {
      switch (tab.name) {
        case "first":
          break;
        case "second":
          // 进度查看
          this.courseProgress();
          break;
        case "third":
          this.getGabbage();
          break;
      }
    },
    // 获取申请状态
    async courseProgress() {
      let res = await teacherApi.courseProgress({
        // courseType: this.baseInfoForm.courseType,
        auditStatus: this.auditStatus,
        courseStatus: 1,
      });
      this.courseList = res.data;
    },
    async getGabbage() {
      let res = await teacherApi.courseProgress({
        auditStatus: 0,
        courseStatus: 0,
      });
      this.gabbageList = res.data;
    },

    detailClick(data) {
      this.$router.push({
        path: "/applyDetail",
        query: {
          id: data.id,
          originPath: "/exper/views/teacher/courseApply",
        },
      });
    },
    async courseLevel() {
      let { data } = await teacherApi.courseLevel();
      this.difficultyList = data;
    },
    async getCourseTypes() {
      let { data } = await teacherApi.getCourseTypes();
      this.courseTypeList = data;
    },
    //el-tree点击事件
    myEvent(d1, d2, d3) {
      // console.log(d1, d2, d3);
      this.$emit("myEvent", d1.id);
    }, //d1.label
    //新增一级目录模块点击事件
  },
  created() {},
};
</script>
<style lang="less" scoped>
.courseApply {
  /deep/.el-upload-list .el-upload-list--text {
    width: 50% !important;
  }
}
.avatar-uploader {
  width: 30%;
}
.custom-tree-container {
  /deep/.el-tree-node {
    margin-bottom: 5px;
  }
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.el-tree {
  height: 100%;
  .isEdit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-input {
      width: 100px;
      height: 5px;
    }
  }
}
.el-icon-plus {
  margin: 10px 0 0 22px;
  color: #606266;
  font-size: 14px;
  span {
    margin-left: 10px;
    font-size: 14px;
  }
}
</style>
<style lang="less">
@color: rgb(229, 229, 229);

.courseApply .el-descriptions__body{
  background: rgb(229,229,229)
}
.secondBox .noImage{
  background: @color;
  // border-radius:4%;
    border-radius:15px;
  height: 100%;
  width: 95%;
  text-align: center;
  line-height: 230px;
}
</style>
